import React from 'react';
import ReactECharts from 'echarts-for-react';
import '../../style/tu1.scss'
var option = {
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    color: ['#83e0ff', '#45f5ce', '#b158ff'],
    series: [
        {
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 1000,
                edgeLength: 50
            },
            roam: true,
            label: {
                normal: {
                    show: true
                }
            },
            data: [
                {
                    name: '校园大数据',

                    symbolSize: 120,
                    draggable: true,
                    category: 0,
                    itemStyle: {
                        normal: {
                            borderColor: '#04f2a7',
                            borderWidth: 6,
                            shadowBlur: 20,
                            shadowColor: '#04f2a7',
                            color: '#001c43',
                        }
                    }
                },
                {
                    name: '疫情大数据',
                    symbolSize: 100,
                    itemStyle: {
                        normal: {
                            borderColor: '#04f2a7',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43',
                        }
                    },
                    category: 1,

                },
                {
                    name: '风控地区',
                    symbolSize: 80,
                    category: 1,
                    itemStyle: {
                        normal: {
                            borderColor: '#04f2a7',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43',
                        }
                    },

                },
                {
                    name: '传播分析',
                    symbolSize: 80,
                    category: 1,
                    itemStyle: {
                        normal: {
                            borderColor: '#82dffe',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43',
                        }
                    },

                },
                {
                    name: '来源分析',
                    symbolSize: 80,
                    category: 1,
                    itemStyle: {
                        normal: {
                            borderColor: '#82dffe',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43',
                        }
                    },

                },
                {
                    name: '学生分析',
                    symbolSize: 100,
                    category: 2,
                    itemStyle: {
                        normal: {
                            borderColor: '#82dffe',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43',
                        }
                    },

                },
                {
                    name: '行程分析',
                    symbolSize: 80,
                    category: 2,
                    itemStyle: {
                        normal: {
                            borderColor: '#b457ff',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#b457ff',
                            color: '#001c43'
                        }
                    },

                },
                {
                    name: '核酸结果分析',
                    symbolSize: 80,
                    itemStyle: {
                        normal: {
                            borderColor: '#82dffe',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43'

                        }
                    },
                    category: 2,

                },
                {
                    name: '健康分析',
                    symbolSize: 80,
                    itemStyle: {
                        normal: {
                            borderColor: '#82dffe',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43'
                        }
                    },
                    category: 2,

                },
                {
                    name: '信息分析',
                    symbolSize: 80,
                    category: 2,
                    itemStyle: {
                        normal: {
                            borderColor: '#82dffe',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: '#04f2a7',
                            color: '#001c43'
                        }
                    },

                }],
            links: [
                {
                    source: '校园大数据',
                    target: '疫情大数据'

                },
                {
                    source: '校园大数据',
                    target: '学生分析',
                },
                {
                    source: '疫情大数据',
                    target: '风控地区',
                },
                {
                    source: '疫情大数据',
                    target: '传播分析',
                },
                {
                    source: '疫情大数据',
                    target: '来源分析',
                },
                {
                    source: '校园大数据',
                    target: '学生分析',
                },
                {
                    source: '学生分析',
                    target: '信息分析',
                },
                {
                    source: '学生分析',
                    target: '行程分析',
                },
                {
                    source: '学生分析',
                    target: '核酸结果分析',
                    value: 'DNA',
                }, {
                    source: '学生分析',
                    target: '健康分析'

                }
            ],
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 5,
                    curveness: 0
                }
            },
            categories: [
                { name: '0' },
                { name: '1' },
                { name: '2' }
            ]
        }
    ]
}
function Tu1(props) {
    return (
        <div className='tu1'>
            <h3 style={{ padding: "20px 20px", textAlign: "center" }}>校园防控分析图</h3>
            <ReactECharts option={option} className="charts" />
        </div>
    );
}

export default Tu1;